<template>
	<view class="inviter-container">
		<view class="select-item">
			<uni-data-select
				class="selected"
				v-model="value"
				:localdata="range"
				@change="change"
				:style="{ background: '#fff', borderRadius: '10px' }"
			></uni-data-select>
			<!-- 邀请人验证码 -->
			<view class="code">
				<text>我的验证码：{{userId}}</text>
			</view>
		</view>

		<uni-section title="邀请人列表" type="line">
			 <uni-card v-for="(item, index) in inviteList" :key="index"  class="card" title="邀请人名称" :extra="item.nickName">
				 <view class="card-item">
				 	<text>电话号码</text>
					<text>{{ item.phonenumber }}</text>
				 </view>
				 <view class="card-item">
				 	<text>被邀请人名称</text>
					<text>{{ item.znickName }}</text>
				 </view>
				 <view class="card-item">
				 	<text>电话号码</text>
					<text>{{ item.zphonenumber }}</text>
				 </view>
			</uni-card>
		</uni-section>
	</view>
</template>

<script>
import { myInvite,userID } from '../../../api/system/user.js';

export default {
	data() {
		return {
			value: 1,
			range: [
				{ value: 1, text: '一级' },
				{ value: 2, text: '二级' },
				{ value: 3, text: '三级' }
			],
			inviteList: [],
			fid: '',
			grade: '',
			userId:''
		}
	},
	onLoad(){
		this.change();
		this.myUser()
	},
	async mounted(){
		await this.myUser()
	},
	methods: {
		async myUser() {
		  const userId = await userID(); // 使用异步请求获取 userId
		  console.log('获取信息成功', userId);
		  this.userId = userId; // 将获取的 userId 赋值给 this.userId
		  this.fid = this.userId; // 将 this.userId 赋值给 this.fid
		  this.change(); // 先调用 change 方法来更新 inviteList
		  this.myInviteRequest(this.fid); // 将 this.fid 作为参数传递给 myInviteRequest
		},
		change(value) {
			const { value: grade } = this.range.find(item => item.value === this.value);
			this.grade = grade;
			// 发起请求
			this.myInviteRequest(this.fid);
		},
		myInviteRequest(fid) {
		  myInvite(fid, this.grade).then(res => {
		    console.log('请求成功', res);
		    this.inviteList = res; // 根据接口返回的数据结构设置 inviteList 的值
		    console.log('xxx', this.inviteList);
		  });
		  // myUser()
		},
	}
}
</script>

<style lang="scss">
.inviter-container{
	padding: 15px  0 0 10px;
	.select{
		width: 120px;
		height: 30px;
		border-radius: 10px;
	}
	
	
	
}
.select-item{
	position: relative;
	.code{
		position: absolute;
		left: 120px;
		top: 15px;
		font-size: 10px;
		// border: 1px solid #ccc;
		width: 130px;
		height: 30px;
		text-align: center;
		color: #999;
		border-radius: 5px;
	}
}
.selected{
		width: 120px;
		height: 30px;
		border-radius: 10px;
		
	}
.uni-section {
	background-color: #f1f1f1
}
.uni-section .card{
	background-color: #fff;
	
}
.card-item{
	display: flex;
	justify-content: space-between;
}
</style>
